<template>
  <div id="Melody">
    <p>猜你喜欢的歌曲</p>
    <div class="box-melody">
      <van-swipe
        class="my-swipe"
        indicator-color="white"
        :loop="false"
        :show-indicators="false"
      >
        <van-swipe-item>
          <div v-for="(item, index) in Personalizedlist.slice(0,3)" :key="index" class="box" @click="playMusic(item)">
            <div class="musicpictures">
              <img :src="item.picUrl+'?param=100y100'" width="100%" height="100%" />
            </div>
            <div class="musicinfo">
              <p>{{ item.song.name }}</p>
              <p>- {{ item.song.artists[0].name }}</p>
            </div>
            <div class="musicplay">
              <span class="bobafont bobamusic-icon"></span>
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div v-for="(item, index) in Personalizedlist.slice(3,6)" :key="index" class="box" @click="playMusic(item)">
            <div class="musicpictures">
              <img :src="item.picUrl+'?param=100y100'" width="100%" height="100%" />
            </div>
            <div class="musicinfo">
              <p>{{ item.song.name }}</p>
              <p>- {{ item.song.artists[0].name }}</p>
            </div>
            <div class="musicplay">
              <span class="bobafont bobamusic-icon"></span>
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div v-for="(item, index) in Personalizedlist.slice(6,9)" :key="index" class="box" @click="playMusic(item)">
            <div class="musicpictures">
              <img :src="item.picUrl+'?param=100y100'" width="100%" height="100%" />
            </div>
            <div class="musicinfo">
              <p>{{ item.song.name }}</p>
              <p>- {{ item.song.artists[0].name }}</p>
            </div>
            <div class="musicplay">
              <span class="bobafont bobamusic-icon"></span>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<style scoped>
</style>

<script>
import {Personalized} from "network/api/RecommendApi";
export default {
  name: "melody",
  data() {
    return {
      Personalizedlist: [],
    };
  },
  mounted () {
    Personalized().then((res) => {
      this.Personalizedlist = res.data.result
    })
  },
  methods: {
    playMusic(item){
      console.log(item);
      this.$store.commit("setCurrentMusicId",item.id)
      this.$store.commit("setLoading",true)
    },
  }
};
</script>

<style scoped>
#Melody{
  margin-top: -20px;
}
#Melody p {
  margin-top: 250px;
  font-weight: bold;
  color: #2ae0c8;
  padding-left: 20px;
}
#Melody .box-melody {
  /* background: #eee; */
  height: 302px;
}
#Melody .box-melody .my-swipe .van-swipe-item {
  /* background: #2ae0c8; */
  line-height: 250px;
  /* background-color: #39a9ed; */
  display: flex;
  flex-direction: column;
}
#Melody .box-melody .my-swipe .van-swipe-item div {
  width: 90%;
  height: 60px;
  /* background: gold; */
  margin-top: 20px;
  margin-left: 20px;
  display: flex;
}
#Melody .box-melody .my-swipe .van-swipe-item div:nth-child(1) {
  margin-top: 0px;
}
#Melody .box-melody .my-swipe .van-swipe-item div .musicpictures {
  width: 20%;
  height: 100%;
  /* background: green; */
  margin-left: 0;
}
#Melody .box-melody .my-swipe .van-swipe-item div .musicpictures img {
  border-radius: 7px;
}
#Melody .box-melody .my-swipe .van-swipe-item div .musicinfo {
  width: 60%;
  height: 100%;
  /* background: pink; */
  margin-top: 0px;
  margin-left: 10px;
}
#Melody .box-melody .my-swipe .van-swipe-item div .musicinfo p {
  margin-top: -95px;
  margin-left: -20px;
  font-weight: normal;
}
#Melody .box-melody .my-swipe .van-swipe-item div .musicinfo p:nth-child(2) {
  font-size: 10px;
  opacity: 0.5;
}
#Melody .box-melody .my-swipe .van-swipe-item div .musicplay {
  width: 10%;
  height: 50%;
  margin-top: 0 auto;
  margin-left: 10px;
  /* background: red; */
}
#Melody .box-melody .my-swipe .van-swipe-item div .musicplay .bobafont{
  line-height: 25px;
  font-size:25px;
  color: #bfbfbf;
}
</style>